<script lang='ts' setup>
import { onMounted, reactive } from 'vue'
import { Website, websites } from '@/apis/website/websites.ts'
import SetWebsite from '@/components/websites/SetWebsite.vue'
import RemoveWebsite from '@/components/websites/RemoveWebsite.vue'

const state = reactive<{ loading: boolean, websites: Website[], edit: boolean, remove: boolean, index: number; website: Website }>({ loading: true, websites: [], edit: false, remove: false, index: -1, website: { hostname: '', reverses: [], tls: { enable: true, custom: false, cert_path: '', key_path: '' }, removing: false } })

onMounted(async () => {
  load().then(() => {
    state.loading = false
  })
})

async function load(): Promise<void> {
  const response = await websites()

  if (0 === response.code) {
    state.websites = response.data.data
  }
}

async function add_website(): Promise<void> {
  state.index = -1
  state.website = { hostname: '', reverses: [], tls: { enable: true, custom: false, cert_path: '', key_path: '' }, removing: false }

  state.edit = true
}

async function saved(index: number, website: Website): Promise<void> {
  if (-1 === index) {
    state.websites.push(website)

    return
  }

  state.websites[index] = website
}

async function removed(index: number): Promise<void> {
  state.websites.splice(index, 1)
}
</script>

<template>
  <n-space class='content-wrap' vertical>
    <template v-if='state.loading'>
      <n-skeleton height='25px' width='100%' />
      <n-skeleton height='25px' width='100%' />
      <n-skeleton height='25px' width='100%' />
    </template>
    <template v-for='(website, index) in state.websites' :key='website.hostname'>
      <n-space :wrap-item='false' align='center' class='website-item'>
        <n-space style='flex-grow: 1'>
          <div>
            <n-text>域名: {{ website.hostname }}</n-text>
          </div>
          <div>
            <n-text>启用TLS: {{ website.tls.enable ? '是' : '否' }}</n-text>
          </div>
          <div>
            <n-text>自定义TLS: {{ website.tls.custom ? '是' : '否' }}</n-text>
          </div>
          <div>
            <n-text>反向代理配置: {{ website.reverses.length }}</n-text>
          </div>
        </n-space>
        <n-space>
          <n-button size='small' type='primary' @click='state.index = index; state.website = website; state.edit = true'>配置</n-button>
          <n-button :loading='website.removing' size='small' type='error' @click='state.index = index; state.website = website; state.remove = true'>移除</n-button>
        </n-space>
      </n-space>
    </template>
    <div>
      <n-button class='width-max' size='small' type='primary' @click='add_website'>添加站点</n-button>
    </div>
  </n-space>
  <SetWebsite v-model:show='state.edit' :index='state.index' :website='state.website' @saved='saved' />
  <RemoveWebsite v-model:show='state.remove' :index='state.index' :website='state.website' @removed='removed' />
</template>

<style scoped>
.website-item {
  padding: 5px 0 15px 0;
  border-bottom: 1px solid #85929E;
}
</style>
